<template>
  <div style="width: 350x; text-align: center">
    <van-tabs v-model:active="active"
     swipeable 
     animated
     type="card"
     :before-change="onBeforeChange"
     @click-tab="onClickTab"
     >
      <van-tab  title="收藏">
        <list1></list1>
      </van-tab>
      <van-tab title="订单">
        <list2></list2>
      </van-tab>
      <van-tab title="支付" >
        <list3></list3>
      </van-tab>
      <van-tab title="不让看" >
        <list3></list3>
      </van-tab>
      
    </van-tabs>
  </div>
</template>
<script setup>
import { ref } from "vue";
import {showToast} from 'vant'

import list1 from './listdata/list1.vue'
import list2 from './listdata/list2.vue'
import list3 from './listdata/list3.vue'

//激活的tab页，如果有name 属性，就不能使用下标
const active = ref(0);
//tab的点击事件
const onClickTab = ({ title }) => showToast(title);

//切换前的事件处理，
const onBeforeChange = (num)=>{
    if(num === 3){
      //限制查看第四个
      console.log(num);
      return false;
    }
    return true
}
</script>
